@mixin sidebar-block {
    padding: 5px 0;
    color: $dark;
}

@mixin transition {
    -webkit-transition: opacity 0.2s, color 0.2s, padding 1s;
    transition: opacity 0.2s, color 0.2s, padding 1s;
}


.text-panel {
    
    position: fixed;
    top: 100px;
    left: calc( 50% + 350px);
    width: 200px;
    padding-left: 20px;
    text-align: left;
    
    padding-top: 200px;
    -webkit-transition: padding 1s;
    transition: padding 1s;
        
    &.editing {
        padding-top: 0px;
    }
    
    .sbutton {
        
        // reset button style
        display: block;
        background: inherit;
        border: none;
        padding: 0;
        margin: 0;
        outline: none;

        @include sidebar-block;
        
        &.time {
            display: none;
            height: 0;
            &.active {
                display: block;
                height: auto;
            }
        }
        
        &.backup.flash i {
            -webkit-animation: save-flash 1s;
            animation: save-flash 1s;
        }

        i {
            font-size: 20px;
            min-width: 20px;
            text-align: center;
            display: inline-block;
            vertical-align: middle;

            padding: 3px;
            border: 1px solid #CCC;
            border-radius: 2px;
            
            &:hover {
              border-color: #AAA;
              cursor: pointer;   
            }
            
            &:active {
                box-shadow: 0 0 3px grey inset;
            }
            
            &.active {
                color: $accent;
            }
        }
        
        .label {
            text-transform: uppercase;
            font-size: 10px;
            padding: 0 5px;
            display: inline-block;
            opacity: 0;
            @include transition;
        }
    }

    .wordcount {
        @include noselect(text);
        @include sidebar-block;
        font-size: 16px; 
        margin-top: 10px;
        .wc-text {
            color: rgba(0,0,0,0);
            @include transition;
            .word-count-number {
                color: $dark;
            }
        }
    }


    opacity: 0.3;
    @include transition;
    
    &:hover {
       opacity: 1;
       .wordcount .wc-text {
           color: $dark;
       }
       .sbutton .label {
           opacity: 0.5;
       }
    }

}

.import-file-wrapper {
    @include custom-file-selector;
    
}


@-webkit-keyframes save-flash {
  0%   { color: $dark;       }
  15%  { color: $accent;     }
  100% { color: $dark;       }
}

@keyframes save-flash {
  0%   { color: $dark;       }
  15%  { color: $accent;     }
  100% { color: $dark;       }
}

